<template>
  <div class="tool">
    <div class="up">
      <button class="card1" @click="variable.ydmsModel.value = !variable.ydmsModel.value">
        <svg
          t="1724915532482"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4470"
          class="instagram"
          width="25px"
          height="25px"
          fill-rule="nonzero"
        >
          <path
            d="M679.408485 744.520404c-14.170505 0-27.823838-7.86101-34.547071-21.307475-9.51596-19.031919-1.758384-42.304646 17.273535-51.820606l103.020607-51.510303c19.031919-9.51596 42.304646-1.861818 51.820606 17.273536 9.51596 19.031919 1.758384 42.304646-17.273536 51.820606l-103.020606 51.510303c-5.585455 2.689293-11.481212 4.033939-17.273535 4.033939z m0-154.530909c-14.170505 0-27.823838-7.86101-34.547071-21.307475-9.51596-19.031919-1.758384-42.304646 17.273535-51.820606l103.020607-51.510303c19.031919-9.51596 42.304646-1.758384 51.820606 17.273535 9.51596 19.031919 1.758384 42.304646-17.273536 51.820607l-103.020606 51.510303c-5.585455 2.689293-11.481212 4.033939-17.273535 4.033939z m0-154.427475c-14.170505 0-27.823838-7.86101-34.547071-21.307475-9.51596-19.031919-1.758384-42.304646 17.273535-51.820606l103.020607-51.510303c19.031919-9.51596 42.304646-1.861818 51.820606 17.273536 9.51596 19.031919 1.758384 42.304646-17.273536 51.820606l-103.020606 51.510303c-5.585455 2.689293-11.481212 4.033939-17.273535 4.033939zM357.520808 731.591111c-5.792323 0-11.688081-1.344646-17.273535-4.033939L237.330101 676.046869c-19.031919-9.51596-26.789495-32.685253-17.273535-51.820606 9.51596-19.031919 32.788687-26.789495 51.820606-17.273536l103.020606 51.510303c19.031919 9.51596 26.789495 32.685253 17.273535 51.820606-6.826667 13.446465-20.48 21.307475-34.650505 21.307475z m0-154.427475c-5.792323 0-11.688081-1.344646-17.273535-4.033939l-103.020606-51.510303c-19.031919-9.51596-26.789495-32.685253-17.273536-51.820606 9.51596-19.031919 32.788687-26.789495 51.820606-17.273535l103.020606 51.510303c19.031919 9.51596 26.789495 32.685253 17.273536 51.820606-6.723232 13.446465-20.376566 21.307475-34.547071 21.307474z m0-154.530909c-5.792323 0-11.688081-1.344646-17.273535-4.033939l-103.020606-51.510303c-19.031919-9.51596-26.789495-32.685253-17.273536-51.820606 9.51596-19.031919 32.788687-26.789495 51.820606-17.273536l103.020606 51.510303c19.031919 9.51596 26.789495 32.685253 17.273536 51.820607-6.723232 13.446465-20.376566 21.307475-34.547071 21.307474z m0 0"
            p-id="4471"
          ></path>
          <path
            d="M512.051717 1001.968485c-10.860606 0-21.514343-3.413333-30.513131-10.033131a51.445657 51.445657 0 0 1-20.997172-41.477172V203.765657c0-22.548687 14.584242-42.408081 36.098586-49.131314L908.61899 25.858586c15.618586-4.861414 32.685253-2.068687 45.821414 7.654141A51.445657 51.445657 0 0 1 975.437576 74.989899v746.692525c0 22.548687-14.584242 42.408081-36.098586 49.131313l-411.97899 128.775758c-4.964848 1.551515-10.136566 2.37899-15.308283 2.37899z m51.510303-760.345859v638.707071l308.958384-96.504242v-638.707071l-308.958384 96.504242z m0 0"
            p-id="4472"
          ></path>
          <path
            d="M512.051717 1001.968485c-5.171717 0-10.343434-0.827475-15.411717-2.37899L84.764444 870.813737c-21.514343-6.619798-36.20202-26.582626-36.20202-49.131313V75.093333c0-16.342626 7.757576-31.754343 20.997172-41.477171a51.454707 51.454707 0 0 1 45.821414-7.654142l411.97899 128.775758a51.397818 51.397818 0 0 1 36.098586 49.131313V950.561616c0 16.342626-7.757576 31.754343-20.997172 41.477172-8.817778 6.464646-19.471515 9.942626-30.409697 9.929697zM151.58303 783.825455l308.958384 96.504242v-638.707071L151.58303 145.118384v638.707071z m0 0"
            p-id="4473"
          ></path>
        </svg>
      </button>
      <button class="card2" @click="participation">
        <svg
          t="1724915610671"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5473"
          width="30px"
          height="30px"
          class="twitter"
        >
          <path
            d="M311.902041 457.665306c-6.269388 0-13.061224-3.134694-16.718368-8.881633-5.746939-9.404082-3.657143-21.420408 5.746939-27.689795l191.216327-124.865307c9.404082-5.746939 21.420408-3.657143 27.689796 5.746939 5.746939 9.404082 3.657143 21.420408-5.746939 27.689796L322.873469 454.008163c-3.657143 2.612245-7.314286 3.657143-10.971428 3.657143zM690.155102 762.77551c-3.134694 0-6.269388-0.522449-8.881633-2.089796L323.395918 574.693878c-9.926531-5.22449-13.583673-17.240816-8.359183-26.644898 5.22449-9.926531 17.240816-13.583673 26.644898-8.359184l357.355102 185.469388c9.926531 5.22449 13.583673 17.240816 8.359183 26.644898-3.134694 6.791837-10.44898 10.971429-17.240816 10.971428z"
            p-id="5474"
          ></path>
          <path
            d="M238.759184 635.820408C170.318367 635.820408 114.938776 580.440816 114.938776 512s55.379592-123.820408 123.820408-123.820408S363.102041 443.559184 363.102041 512s-55.902041 123.820408-124.342857 123.820408zM576.783673 363.102041c-68.440816 0-123.820408-55.379592-123.820408-123.820408S508.342857 114.938776 576.783673 114.938776s123.820408 55.379592 123.820409 123.820408-55.379592 124.342857-123.820409 124.342857zM785.240816 909.061224c-68.440816 0-123.820408-55.379592-123.820408-123.820408s55.379592-123.820408 123.820408-123.820408 123.820408 55.379592 123.820408 123.820408-55.379592 123.820408-123.820408 123.820408z"
            p-id="5475"
          ></path>
        </svg>
      </button>
    </div>
    <div class="down">
      <button class="card3" @click="gdpl">
        <svg
          t="1724916985909"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9154"
          width="30px"
          height="30px"
          class="github"
        >
          <path
            d="M617.124 221.773h216.33c46.153 77.632 34.733 47.996 34.733 102.145l1.222 300.283c0 54.147-2.021 76.737-43.955 104.179H486.277l-57.332 10.007-145.402 120.719 13.382-114.904 6.127-12.256c-54.148 0-74.232-47.471-74.232-101.619V319.824c0-54.148 43.879-98.051 98.051-98.051h290.253z"
            p-id="9155"
          ></path>
          <path
            d="M162.607 468.936c-13.537 0-24.513-10.964-24.513-24.514v-59.223c0-13.548 10.976-24.513 24.513-24.513s24.513 10.964 24.513 24.513v59.223c0 13.55-10.976 24.514-24.513 24.514z"
            p-id="9156"
          ></path>
          <path
            d="M283.543 883.619c-3.28 0-6.583-0.646-9.707-2.011a24.507 24.507 0 0 1-14.806-22.693l0.802-106.022c-67.207-0.456-121.738-55.25-121.738-122.565v-120.53c0-13.549 10.976-24.512 24.513-24.512s24.513 10.963 24.513 24.512v120.529c0 40.552 32.987 73.539 73.539 73.539h23.867a24.506 24.506 0 0 1 17.403 7.254 24.5 24.5 0 0 1 7.11 17.45l-0.55 72.725 94.652-90.631a24.542 24.542 0 0 1 16.949-6.798h347.176c40.553 0 73.539-32.987 73.539-73.539V319.824c0-40.551-32.986-73.539-73.539-73.539H260.658c-40.551 0-73.539 32.987-73.539 73.539 0 13.549-10.976 24.513-24.513 24.513s-24.513-10.963-24.513-24.513c0-67.578 54.986-122.564 122.564-122.564h506.605c67.578 0 122.565 54.986 122.565 122.564v310.503c0 67.579-54.987 122.565-122.565 122.565H429.926L300.492 876.821a24.52 24.52 0 0 1-16.949 6.798z"
            p-id="9157"
          ></path>
          <path
            d="M755.009 447.703h-484.32c-13.537 0-24.513-10.964-24.513-24.513 0-13.549 10.976-24.513 24.513-24.513h484.32c13.537 0 24.512 10.963 24.512 24.513 0 13.549-10.975 24.513-24.512 24.513zM640.607 562.894H270.665c-13.538 0-24.513-10.964-24.513-24.512 0-13.55 10.976-24.514 24.513-24.514h369.942c13.537 0 24.512 10.964 24.512 24.514 0 13.548-10.974 24.512-24.512 24.512z"
            fill="#213847"
            p-id="9158"
          ></path>
        </svg>
      </button>
      <button class="card4" @click="aa">
        <svg
          height="30px"
          width="30px"
          viewBox="0 0 48 48"
          xmlns="http://www.w3.org/2000/svg"
          class="discord"
        >
          <path
            d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</template>
<script setup>
  import variable from '../../../js/variable';
  import { ScrollIntoView, Notice } from 'view-ui-plus';
  const axios = inject('axios');

  const route = useRoute();

  function aa() {
    Notice.warning({
      title: '还没想好~',
    });
  }

  //分享按钮
  function participation() {
    //分享二维码
    axios
      .get('article/scewm?id=' + route.params.id)
      .then((response) => {
        let res = response.data;
        variable.fxUrl.value = res;
        variable.participationModal.value = true;
      })
      .catch();
  }

  //滚动到评论区
  function gdpl() {
    // 滚动至评论区域顶部
    ScrollIntoView(document.getElementById('comment_title'), {
      time: 1000,
    });
  }
</script>
<style scoped>
  .tool {
    padding: 40px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.5em;
  }

  .up {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
  }

  .down {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
  }

  .card1 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 90px 5px 5px 5px;
    box-shadow:
      rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: 0.2s ease-in-out;
  }

  .instagram {
    margin-top: 1.5em;
    margin-left: 1.2em;
    fill: #29ccb6;
  }

  .card2 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 90px 5px 5px;
    box-shadow:
      rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: 0.2s ease-in-out;
  }

  .twitter {
    margin-top: 1.5em;
    margin-left: -0.9em;
    fill: #5eb0f3;
  }

  .card3 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 5px 5px 90px;
    box-shadow:
      rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: 0.2s ease-in-out;
  }

  .github {
    margin-top: -0.6em;
    margin-left: 1.2em;
    fill: #31d3ff;
  }

  .card4 {
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 5px 90px 5px;
    box-shadow:
      rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: 0.2s ease-in-out;
  }

  .discord {
    margin-top: -0.9em;
    margin-left: -1.2em;
    fill: #8c9eff;
  }

  .card1:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #29ccb6;
  }

  .card1:hover .instagram {
    fill: white;
  }

  .card2:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #5eb0f3;
  }

  .card2:hover .twitter {
    fill: white;
  }

  .card3:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #31d3ff;
  }

  .card3:hover .github {
    fill: white;
  }

  .card4:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #8c9eff;
  }

  .card4:hover .discord {
    fill: white;
  }
</style>
